<template>
    <div class="app-container">
        <el-card shadow="never" class="table-card">
            <template #header>
                <div class="card-header">
                    <span>门店列表</span>
                    <el-button type="primary" @click="handleAdd">添加门店</el-button>
                </div>
            </template>

            <el-table v-loading="loading" :data="storeList" border style="width: 100%">
                <el-table-column type="index" width="50" label="#" />
                <el-table-column prop="name" label="门店名称" show-overflow-tooltip />
                <el-table-column prop="address" label="地址" show-overflow-tooltip />
                <el-table-column prop="phone" label="联系电话" width="150" />
                <el-table-column prop="openingHours" label="营业时间" width="180" />
                <el-table-column label="操作" width="180" fixed="right">
                    <template #default="scope">
                        <el-button size="small" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue"
import { useRouter } from "vue-router"
import { ElMessage, ElMessageBox } from "element-plus"
import { getStoreList, deleteStore } from "../../api/store"

const router = useRouter()
const loading = ref(false)
const storeList = ref([])

const getList = () => {
    loading.value = true
    getStoreList()
        .then(res => {
            storeList.value = res.data || []
        })
        .catch(() => {
            ElMessage.error("获取门店列表失败")
        })
        .finally(() => {
            loading.value = false
        })
}

const handleAdd = () => {
    router.push("/store/add")
}

const handleEdit = (row) => {
    router.push(`/store/edit/${row.id}`)
}

const handleDelete = (row) => {
    ElMessageBox.confirm(`确定要删除门店 "${row.name}" 吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
    }).then(() => {
        deleteStore(row.id).then(() => {
            ElMessage.success("删除成功")
            getList()
        })
    }).catch(() => { })
}

onMounted(() => {
    getList()
})
</script>

<style scoped>
.app-container {
    padding: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>
